DOM
y
Eventos
JavaScript
no
solo
nos
permite
hacer
cálculos
y
mostrar
mensajes,
sino
que
también
nos
da
la
posibilidad
de
interactuar
con
los
elementos
de
una
página
web.
Esto
lo
logramos
a
través
del
DOM
(Modelo
de
Objetos
del
Documento)
y
los
eventos
.
7.1
¿Qué
es
el
DOM?
El
DOM
es
una
representación
de
la
página
web
en
forma
de
un
árbol
de
elementos.
Cada
etiqueta
HTML
es
un
"nodo"
en
ese
árbol
y
podemos
modificar
su
contenido,
estilo
o
comportamiento
usando
JavaScript.
Por
ejemplo,
si
tenemos
este
HTML:
<p
id="mensaje">Hola,
mundo!</p>
Podemos
cambiar
el
texto
usando
JavaScript:
document.getElementById("mensaje").textContent
=
"¡Bienvenido
a
JavaScript!";
7.2
Seleccionar
Elementos
del
DOM
Para
modificar
elementos
en
una
página,
primero
debemos
seleccionarlos.
Hay
varias
formas
de
hacerlo:
getElementById()
Selecciona
un
elemento
por
su
id
.
let
parrafo
=
document.getElementById("mensaje");
parrafo.textContent
=
"Nuevo
texto";
querySelector()
y
querySelectorAll()
Estos
permiten
seleccionar
elementos
como
en
CSS.
let
elemento
=
document.querySelector("p");
//
Selecciona
el
primer
<p>
elemento.style.color
=
"blue";
let
elementos
=
document.querySelectorAll("p");
//
Selecciona
todos
los
<p>
elementos.forEach(p
=>
p.style.fontWeight
=
"bold");
7.3
Eventos
en
JavaScript
Un
evento
es
una
acción
que
ocurre
en
la
página,
como
hacer
clic
en
un
botón,
mover
el
mouse
o
escribir
en
un
campo
de
texto.
Podemos
capturar
estos
eventos
y
ejecutar
código
cuando
sucedan.
Ejemplo:
Evento
click
Podemos
hacer
que
un
botón
muestre
un
mensaje
cuando
se
haga
clic
en
él:
<button
id="btn">Haz
clic
aquí</button>
document.getElementById("btn").addEventListener("click",
function()
{
alert("Botón
presionado");
});
Otros
eventos
comunes
●
mouseover
:
Cuando
el
mouse
pasa
sobre
un
elemento.
●
mouseout
:
Cuando
el
mouse
sale
del
elemento.
●
keydown
:
Cuando
se
presiona
una
tecla.
●
keyup
:
Cuando
se
suelta
una
tecla.
Ejemplo
con
mouseover
:
<p
id="texto">Pasa
el
mouse
sobre
mí</p>
document.getElementById("texto").addEventListener("mouseover",
function()
{
this.style.color
=
"red";
});
7.4
Modificar
Estilos
con
JavaScript
Podemos
cambiar
la
apariencia
de
los
elementos
modificando
sus
estilos
directamente
desde
JavaScript.
document.getElementById("btn").style.backgroundColor
=
"blue";
document.getElementById("btn").style.color
=
"white";
7.5
Creación
y
Eliminación
de
Elementos
Podemos
agregar
y
eliminar
elementos
dinámicamente.
Crear
un
elemento
nuevo
let
nuevoParrafo
=
document.createElement("p");
nuevoParrafo.textContent
=
"Este
es
un
nuevo
párrafo";
document.body.appendChild(nuevoParrafo);
Eliminar
un
elemento
let
elemento
=
document.getElementById("mensaje");
elemento.remove();
7.6
Ejercicio
Práctico
Objetivo:
Crear
una
página
con
un
botón
que
cambie
el
color
de
fondo
al
hacer
clic.
Pasos:
1.
Crea
un
archivo
HTML
con
un
button
.
2.
Usa
JavaScript
para
cambiar
el
color
de
fondo
cuando
el
usuario
haga
clic
en
el
botón.
Contactanos
Español
Sin
Fronteras
Gmail
espanolsinfronteras1@gmail.com
Español
Sin
Fronteras
-
Recursos
Educativos
Gratuitos
Instagram
@espanol_sin_fronteras_org